<template>
  <div class="app-container">
    <h1>
      {{ dictDataStore.getDictItemVal('sourceType', '2') }}
    </h1>

    <div>
      <h1>切片上传示例</h1>
      <CommonSliceUpload
        @breakpointContinueFinishE="reloadData"
        acceptType=".mp3, .wav, .ogg, .aac, .flac"
        upClass="CommonSliceUpload2022"
      >
        <div class="uploadbtn_inner">
          <p>点击上传文件</p>
          <p>支持的音频格式：.mp3, .wav, .ogg, .aac, .flac等</p>
          <p class="huo100">或</p>
          <p>
            <el-button
              type="primary"
              text
              bg
              size="default"
              @click.stop="openMate"
            >
              选择素材库
            </el-button>
          </p>
        </div>
      </CommonSliceUpload>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useDictDataStore } from '@/store'
import CommonSliceUpload from '@/components/CommonSliceUpload/index.vue'

const dictDataStore = useDictDataStore()

/**
 * 上传回调
 * @param item
 */
const reloadData = (item) => {
  // videoAutoClipFile.background_music_url = item.filePath
  // videoAutoClipFile.background_music_cover_url = item.cover_file_url
  // videoAutoClipFile.background_music_duration = item.duration
  // videoAutoClipFile.background_music_duration_time = item.duration_time
  // videoAutoClipFile.background_music_name = item.name
}
const openMate = () => {
  // console.log('素材库')
  // xzdialogRef.value.open()
}
</script>

<style lang="scss" scoped>
::v-deep(.CommonSliceUpload2022 .uploadbtn) {
  display: block;
}
.CommonSliceUpload2022 {
  display: block;
  // .uploadbtn {
  //   display: block;
  // }
  // .uploadnew {
  //   display: block;
  // }
  .uploadbtn_inner {
    box-sizing: border-box;
    padding: 45px 0;
    p {
      text-align: center;
      color: rgba(0, 0, 0, 0.65);
      padding: 3px 0;
    }
    .huo100 {
      color: #a9a9a9;
    }
  }
}
</style>
